// gasp 动画库
// gasp.to(控制元素，属性对象) 补间类型--当前动画到设置的动画中间的动画
import { useEffect } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import gsap from 'gsap';

function App() {
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 10); // 相机位置
    scene.add(camera);

    // 创建几何体
    const cubeGenomery = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const cube = new THREE.Mesh(cubeGenomery, cubeMaterial);
    scene.add(cube);

    // 渲染器
    const myrender = new THREE.WebGLRenderer();
    myrender.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(myrender.domElement);

    // 轨道控制器
    const controls = new OrbitControls(camera, myrender.domElement);

    // 坐标轴
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);

    //#### gsap动画效果
    var animate = gsap.to(cube.position, {
      x: 200, // 水平移动200px
      duration: 5, // 持续
      ease: 'power1.inOut', // 缓动
      repeat: -1, // //   设置重复的次数，无限次循环-1
      yoyo: true, //   往返运动
      delay: 0, //   delay，开始时延迟2秒运动
    });

    function renders() {
      myrender.render(scene, camera);
      requestAnimationFrame(renders);
    }
    renders();
  }, []);
  return <div></div>;
}
export default App;
